<template>
  <div class="main-wrap">
    <div>
      <el-form size="small" :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="预约者账号">
          <el-input v-model="query.number" placeholder="预约者账号"></el-input>
        </el-form-item>
        <el-form-item label="预约者姓名">
          <el-input v-model="query.userName" placeholder="预约者姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="预约座位" name="seat"></el-tab-pane>
      <el-tab-pane label="预约研讨室" name="seminar"></el-tab-pane>
    </el-tabs>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="libraryName" label="图书馆"> </el-table-column>
        <el-table-column prop="floorName" label="楼层名称"> </el-table-column>
        <el-table-column prop="roomName" :label="activeName == 'seat' ? '阅览室' : '研讨室'">
        </el-table-column>
        <el-table-column prop="number" label="预约者账号"> </el-table-column>
        <el-table-column prop="userName" label="预约者姓名"> </el-table-column>
        <el-table-column label="座位" v-if="activeName == 'seat'">
          <template slot-scope="scope"> {{ scope.row.row }}{{ scope.row.column }} </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="日期" v-if="activeName == 'seat'">
        </el-table-column>
        <el-table-column prop="resDate" label="日期" v-if="activeName == 'seminar'">
        </el-table-column>
        <el-table-column label="开始日期">
          <template slot-scope="scope">
            {{ activeName == 'seat' ? formatDate(scope.row.startTime) : scope.row.orderstart }}
          </template>
        </el-table-column>
        <el-table-column label="结束日期">
          <template slot-scope="scope">
            {{ activeName == 'seat' ? formatDate(scope.row.endTime) : scope.row.orderend }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope"> {{ bookingState[scope.row.state] }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.state != -1"
              @click="cancel(scope.row)"
              type="primary"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from '@/req'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      activeName: 'seat',
      tableData: [],
      query: {
        number: '',
        userName: '',
      },
      bookingState: {
        0: '待签到',
        1: '已签到',
        2: '未签到',
        '-1': '使用完成',
      },
    }
  },
  created() {
    this.getReservationByUid()
  },
  methods: {
    tabClick(tab, event) {
      console.log(this.activeName)
      this.tableData = []
      if (this.activeName == 'seat') {
        this.getReservationByUid()
      } else {
        this.getSemReservationByUser()
      }
    },
    async getReservationByUid() {
      const res = await request.post('/user/getSeatReservation', this.query)
      this.tableData = res ? res.rows : []
    },
    async getSemReservationByUser() {
      const res = await request.post(`/seminarRes/getSemReservation`, this.query)
      this.tableData = res ? res.rows : []
    },
    sign(data) {
      if (this.activeName == 'seat') {
        request
          .post('/user/toSigned', {
            number: '123456',
            rid: data.rid,
          })
          .then((res) => {
            if (res.code === 200) {
              if (res.verify) {
                this.$message({
                  type: 'success',
                  message: '签到成功',
                })
                this.getReservationByUid()
              } else {
                this.$message({
                  type: 'warning',
                  message: '签到码错误',
                })
              }
            } else {
              this.$message.error('时间超时，签到失败')
            }
          })
      } else {
        request
          .post('/seminarRes/sign', {
            id: data.id,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '签到成功',
              })
              this.getSemReservationByUser()
            } else {
              this.$message({
                type: 'warning',
                message: '签到失败',
              })
            }
          })
      }
    },
    search() {
      if (this.activeName == 'seat') {
        this.getReservationByUid()
      } else {
        this.getSemReservationByUser()
      }
    },
    reset() {
      this.query.number = ''
      this.query.userName = ''
      this.search()
    },
    cancel(data) {
      let url = '/public/updState'
      const param = { id: '', state: -1 }
      let refuse = () => this.getReservationByUid()
      if (this.activeName == 'seat') {
        url = '/public/updState'
        param.id = data.rid
        refuse = () => this.getReservationByUid()
      } else {
        url = '/seminarRes/updState'
        param.id = data.id
        refuse = () => this.getSemReservationByUser()
      }
      request.post(url, param).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
        } else {
          this.$message({
            type: 'error',
            message: '操作失败',
          })
        }
        refuse()
      })
    },
    signOut(data) {
      if (this.activeName == 'seat') {
        request
          .post('/user/signOut', {
            // sid: this.item.sid,
            rid: data.rid,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '签退成功',
              })
              this.getReservationByUid()
            }
          })
      } else {
        request
          .post('/seminarRes/signOut', {
            id: data.id,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '签退成功',
              })
              this.getSemReservationByUser()
            } else {
              this.$message({
                type: 'warning',
                message: '签退失败',
              })
            }
          })
      }
    },
    formatDate(data) {
      return dayjs(data).format('HH:mm')
    },
  },
}
</script>

<style scoped>
.personal-wrap {
  padding: 0 10px;
}
</style>
